<template>
  <div class="file-view"
       v-loading="loading"
       element-loading-text="正在请求中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(200, 200, 200, 0.8)">
    <div class="file-view-title" v-show="list && list.length > 0">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="file-view-list" v-if="type === 'picture'">
      <div class="file-view-item" v-for="(item, index) in list" :key="item.id">
        <img :src="getUrl(item)" preview="1" @error="e => e.target.src = '/error.png'"  :preview-text="item.oriFileName"/>
        <div class="file-view-item__txt">
          {{ item.oriFileName }}
        </div>
        <span class="file-view-item__delete" v-if="deleteAble">
            <i class="el-icon-close" @click="onDelete(item, index)"></i>
          </span>
      </div>
    </div>
    <div class="file-view-list" v-else>
      <div class="file-view-item" v-for="(item, index) in list" :key="item.id">

        <template v-if="item.fileType.indexOf('image') >= 0">
          <img :src="getUrl(item)" @error="e => e.target.src = '/error.png'"  preview="1" :preview-text="item.oriFileName"/>
        </template>
        <template v-else-if="item.fileType.indexOf('video') >= 0">
          <video width="100%" controls="" name="media">
            <source :src="getUrl(item)" />
          </video>
        </template>

        <div class="file-view-item__txt link-color" @click="download(item)">
          {{ item.oriFileName }}
        </div>
        <span class="file-view-item__delete" v-if="deleteAble">
            <i class="el-icon-close" @click="onDelete(item, index)"></i>
          </span>
      </div>
    </div>
  </div>
</template>

<script>
import {postSysFileListAll, getSysFileDeleteId} from '@/api/system/file'
const API_HOST = process.env.VUE_APP_BASE_API
const DOWN_RUL = '/system/file/downloadFile/'

//  <file-view :params="{xtlx: 'kckj-image', relateId: id}" type="picture" title="图片"/>
export default {
  name: 'file-view',
  cnName: '查看已经下载文件',
  props: {
    id: [String, Number],
    params: Object,
    title: String,
    type: String, // picture/media/doc
    deleteAble: {
      type: Boolean,
      default: true
    },
    click: Function
  },
  data() {
    return {
      base: API_HOST + DOWN_RUL,
      list: [],
      loading: false
    }
  },
  methods: {
    async init() {
      const res = await postSysFileListAll(this.params)
      this.list = res.data || []

      this.$nextTick(_ => {
        this.refreshPreview()
      })
    },
    onDelete(item, index) {
      this.$confirm('确定删除该附件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        getSysFileDeleteId(item.id).then(_ => {
          this.loading = false
          this.list.splice(index, 1)

          setTimeout(_ => {
            this.$nextTick(_ => {
              this.refreshPreview()
            })
          }, 100)
        }).catch(e => {
          this.loading = false
        })
      })
    },
    getUrl(item) {
      if(item.url && item.url.indexOf('http') === 0) {
        return item.url
      }
      return this.base + item.id
    },
    download(item) {
      if(this.click) {
        this.click(item)
        return
      }
      window.open(this.getUrl(item))
    },
    refreshPreview() {
      this.$previewRefresh()
    },
    getFileIds() {
      return this.list.map(o => o.id)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.file-view {
  position: relative;

  &-title {
    margin: 10px;
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px;
    font-size: 12px;
  }

  .link-color {
    color: #0c76e5;
    cursor: pointer;
    overflow: hidden;
  }

  &-item {
    width: 23%;
    padding: 10px;
    border: 1px dashed rgba(36, 220, 247, .3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 2%;
    margin-bottom: 10px;
    position: relative;

    img {
      max-width: 90%;
      margin: 0 auto;
      display: block;
      max-height: 120px;
    }

    &__txt {
      text-align: center;
    }

    &__delete {
      position: absolute;
      right: -8px;
      top: -10px;
      width: 18px;
      height: 18px;
      background: #F00;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      cursor: pointer;
    }
  }
}
</style>
